<template>
  <div class="scroll-container" ref="container" :data-direction="isHorizontal ? 'horizontal' : 'vertical'"
    :data-reverse="isReverse ? 'true' : 'false'" :class="isHorizontal ? 'aic' : 'jcc'">
    <div class="line" :style="{
      animationDuration: animationDuration,
      flexDirection: isHorizontal ? 'row' : 'column'
    }">
      <!-- 动态生成点 -->
      <div v-for="dot in dots" :key="dot" class="dot" :style="{
        width: isHorizontal ? '50px' : '10px',
        height: isHorizontal ? '10px' : '50px'
      }"></div>
      <!-- 克隆一份点来实现无缝滚动 -->
      <div v-for="dot in dots" :key="'clone-' + dot" class="dot" :style="{
        width: isHorizontal ? '50px' : '10px',
        height: isHorizontal ? '10px' : '50px'
      }"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isHorizontal: { type: Boolean, default: true },   // 控制水平true或垂直false滚动 
    isReverse: { type: Boolean, default: false },     // 控制滚动方向true下右 false上左
    animationSpeed: { type: String, default: '10s' }  // 动画速度
  },
  data() {
    return {
      dots: [],               // 存储点的数组
      dotSize: 40             // 每个矩形的尺寸（包含间距）
    };
  },
  computed: {
    animationDuration() {
      return this.animationSpeed;
    }
  },
  methods: {
    generateDots() {
      // 获取容器尺寸（宽度或高度）
      const containerSize = this.isHorizontal
        ? this.$refs.container.offsetWidth
        : this.$refs.container.offsetHeight;

      // 根据容器尺寸计算需要的点数
      const dotsCount = Math.ceil(containerSize / this.dotSize) + 5;

      // 更新 dots 数组
      this.dots = Array.from({ length: dotsCount }, (_, i) => i);
    }
  },
  mounted() {
    // 初次加载时生成点
    this.generateDots();
    // 窗口大小变化时重新生成点
    window.addEventListener('resize', this.generateDots);
  },
  beforeDestroy() {
    // 移除窗口监听器，防止内存泄漏
    window.removeEventListener('resize', this.generateDots);
  }
};
</script>

<style lang="less" scoped>
@backgroundColor: #002060;
@dotColor: #fff;
@gap: 20px;

.jcc {
  justify-content: center;
}

.aic {
  align-items: center;
}

.scroll-container {
  background-color: @backgroundColor;
  display: flex;
  overflow: hidden;
  position: relative;

  .line {
    display: flex;
    gap: @gap;
    animation: moveDots linear infinite;
    position: absolute;

    .dot {
      background-color: @dotColor;
      border-radius: 3px;
      /* 可以调整边角的圆润度 */
    }
  }
}

/* 动态生成 keyframes */
.scroll-container[data-direction="horizontal"][data-reverse="false"] .line {
  animation-name: horizontalForward;
}

.scroll-container[data-direction="horizontal"][data-reverse="true"] .line {
  animation-name: horizontalReverse;
}

.scroll-container[data-direction="vertical"][data-reverse="false"] .line {
  animation-name: verticalForward;
}

.scroll-container[data-direction="vertical"][data-reverse="true"] .line {
  animation-name: verticalReverse;
}

/* 水平正方向（从左到右） */
@keyframes horizontalForward {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* 水平反方向（从右到左） */
@keyframes horizontalReverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* 垂直正方向（从上到下） */
@keyframes verticalForward {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* 垂直反方向（从下到上） */
@keyframes verticalReverse {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>
